<template>
  <el-dialog title="分配权限" :visible="showDialog11" @close="closefn">
    <el-tree
      ref="haihai"
      :data="quanxian"
      node-key="id"
      :props="{ label: 'title' }"
      default-expand-all
      show-checkbox
      check-strictly="true"
    />
    <template #footer>
      <el-button @click="closefn">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getPermissionsList } from '@/api/permission'
import { getRoledetail, editRoledetail } from '@/api/juese'
import { listToTree } from '@/utils'
export default {
  props: {
    showDialog11: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      quanxian: [],
      rolesId: [],
      id: ''
    }
  },
  async created() {
    const res = await getPermissionsList({
      _limit: 100,
      _start: 0
    })
    // console.log(22, res)
    this.quanxian = listToTree(res, '0')
    // this.quanxian = res
    console.log(31, this.quanxian)
  },
  methods: {
    async confirm() {
      // 饿了吗组件方法拿id
      const checked = this.$refs.haihai.getCheckedKeys()
      console.log(49, checked)
      // 分配权限接口
      await editRoledetail({
        id: this.id,
        permissions: checked
      })
      // 提示
      this.$message.success('分配成功')
      // 关闭弹窗
      this.closefn()
    },
    // 关闭弹窗
    closefn() {
      this.$emit('update:showDialog11', false)
      this.rolesId = []
    },
    async getRoledetail(id) {
      this.id = id
      console.log(59, id)
      const res = await getRoledetail(id)
      // console.log(50, res)
      this.rolesId = res.permissions
      console.log(54, this.rolesId)
      const haha = this.rolesId.map(item => item.id)
      // console.log(60, haha)
      this.rolesId = haha
      this.$refs.haihai.setCheckedKeys(this.rolesId)
    }
  }
}
</script>

<style >
</style>
